<template>
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view class="goods-item" @click="gotoProductDetail(product)">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">
                ￥{{ $formatP(product.goods_price) }}
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        cid: '',
        query: '',
        pagenum: 1,
        pagesize: 10,
      },

      // 商品数据
      productList: [],

      // 商品数据总条数，用来实现分页
      total: 0,

      // 商品的默认图片
      defaultImage:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',

      // 是否正在请求数据
      isLoading: false, // 节流阀
    }
  },
  created() {
    // 发请求获取商品列表 请求参数有点多 cid  query  pagenum pagesize
  },
  // 这里才能获取页面参数!!!
  onLoad({ query = '', cid = '' }) {
    // console.log(res)

    this.params.query = query
    this.params.cid = cid

    // console.log(this.params)

    this.getProductList()
  },

  // 防抖 固定时间内 高频触发 只执行最后一次!!!   定时器
  // 节流 固定时间内 高频触发 只执行第一次!!!     flag

  onReachBottom() {
    // 有没有更多数据需要加载
    if (this.productList.length === this.total) {
      this.$msg('我是有底线的....')
      return
    }

    if (this.isLoading) {
      // 正在请求中...

      return
    }

    // 配置页面级别的上拉加载:
    //   1.配置onReachBottomDistance触底距离
    //   2.配置onReachBottom钩子

    // 到达"底部"时就会触发

    console.log('触底啦...')

    this.params.pagenum++ // 页码+1
    this.getProductList() // 请求数据
  },

  async onPullDownRefresh() {
    // 配置页面级别的下拉刷新
    //   1. 启用下拉刷新enablePullDownRefresh
    //   2. 配置onPullDownRefresh钩子
    console.log('下拉了...')

    // 页码重置
    this.params.pagenum = 1
    // 列表数据重置
    this.productList = []

    // 获取最新的第一页的10条数据
    await this.getProductList()

    // 如何关闭下拉盒子
    // 请求结束后 手动关闭下拉盒子   wx.stopPullDownRefresh
    uni.stopPullDownRefresh()

    // setTimeout(() => {
    //   console.log(1111)
    // }, 0)

    // console.log(222)
  },

  methods: {
    // 获取商品列表数据的方法
    async getProductList() {
      this.isLoading = true // 开启节流阀

      const { meta, message } = await this.$http.get(
        '/goods/search',
        this.params
      )

      // 请求失败处理
      if (meta.status !== 200) {
        return this.$msg()
      }

      this.productList = [...this.productList, ...message.goods] // 追加数据 数据是越来越多的 结构是越来越长的!!!
      this.total = message.total

      this.isLoading = false // 关闭节流阀
    },

    gotoProductDetail(product) {
      console.log(product.goods_id)

      uni.navigateTo({
        url:
          '/pages_sub1/product-detail/product-detail?pid=' + product.goods_id,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
